<style>
.tab-pane{
	position: relative; 
	margin: 10px;
}
.box-footer{
	margin-left: 50px;
	padding-bottom: 20px;
}
.filter-ul{
	padding: 10px 12px;
    margin: 0;
}
li.li-inline {
    display: inline-block;
    margin: 4px 5px;
    padding: 0;
    min-height: 28px;
    max-width: 80%;
    line-height: 28px;
    vertical-align: middle;
}
#search-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.tab-content{
	overflow-x: auto;
}
.p_s_rolename{
	float: right;
	margin-left: 5px;
	margin-top: -3px;
}
.content {
    padding: 20px 15px;
    background: #f9f9f9;
    overflow: unset;
}
</style>
    <{include file='../common_params.tpl'}>
    
    <div class="nav-tabs-custom" id="players">   	    
            <ul class="nav nav-tabs">
            	<{foreach from=$tabList item=item key=key}>
                    <li><a data-toggle="tab" id="grid-<{$key}>" class="grid-tab" href="#<{$key}>"><{$item}></a></li>
                <{/foreach}>
            </ul>

            <div class="tab-content no-padding">
            	<{foreach from=$tabList item=item key=key}>
            		<div id="<{$key}>" class="tab-pane active" data-type="<{$key}>">
                	
                    </div>
            	<{/foreach}>	
            </div>
            
            <div class="box-footer">
            </div>
     </div>
    
    


<script>

	window.onload = function () { 
		$("a.grid-tab").first().click();
	}
	
    $(function(){  

    	$("a.grid-tab").click(function(){
    		var href = $(this).attr('href');
    		var url ="?r=system/search_info&g=<{$game}>";
    		var type = $(href).attr('data-type');
    		ajax(url,href,type);

    	});
    	

    	function ajax(url,href,type){
    		$.ajax({
    			type : 'POST',
    			url : url,
				data : {'type':type},
				dataType :'html',
				success : function(res){
					$(href).html(res);
				}
			});
    	}

    });
    
    
    
</script>

